﻿<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <script src="../Scripts/jquery-1.10.2.min.js"></script>
    <link href="../Content/font-awesome.min.css" rel="stylesheet" />
    <link href="../lib/jQuery.canvas.css" rel="stylesheet" />
    <script src="../lib/jQuery.canvas.js"></script>
    <link href="../Content/bootstrap.min.css" rel="stylesheet" />
    <script src="../Scripts/bootstrap.min.js"></script>
</head>
<body class="container-fluid">
    <div class="panel" >
        <div class="panel-heading"></div>
        <div class="panel-body">
            <div id="myCanvas1" class="myCanvas" style="width:400px;height:150px">

            </div>
        </div>
    </div>
    <div class="panel">
        <div class="panel-heading">调整</div>
        <div class="panel-body form-inline">
            <div class="row">
                <div class="form-group">
                    <label for="width" class="control-label">宽度</label>
                    <div class="input-group">
                        <input id="width" type="number" class="form-control" value="400" />
                        <span class="input-group-addon">px</span>
                    </div>
                </div>
                <div class="form-group">
                    <label for="height" class="control-label">高度</label>
                    <div class="input-group">
                        <input id="height" type="number" class="form-control" value="150" />
                        <span class="input-group-addon">px</span>
                    </div>
                </div>
            </div>
            <script type="text/javascript">
                $("input").change(function () {
                    var id = this.id;
                    //id恰好被设置为height\width
                    $("#myCanvas1").myCanvas(id, this.value);
                })
            </script>
        </div>
    </div>
</body>
</html>
